import React from 'react';
import { Breadcrumb, Table } from 'antd';
import { Link } from 'react-router-dom';
import http from '../../http';
const { Column } = Table;
class User extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userList: [],
            pagination: {
                total: 1,
                pageSize: 10,
                pageNum: 1
            }
        }
    }
    userList = (pageSize,pageNum) => { //用户列表
        http.get('/api/manage/user/list.do?pageSize='+pageSize+'&pageNum='+pageNum).then(res => {
            this.setState({
                userList: res.data.list,
                pagination: {
                    total: res.data.total,
                    pageSize: res.data.pageSize,
                    pageNum: res.data.pageNum
                }
            })
        })
    }
    changePage = (page) => { //分页
        this.userList(page.pageSize,page.current)
    }
    componentDidMount() {
        const {pageSize,pageNum} = this.state.pagination
        this.userList(pageSize,pageNum)
    }
    render() {
        const {userList,pagination} = this.state
        const filterTime = time => {
            var date = new Date(time);
            return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
        }
        return (
            <div className='user'>
                <div className='breadcrumb-con'>
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to='/main/home'>首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>用户列表</Breadcrumb.Item>
                    </Breadcrumb>
                    <h2>用户列表</h2>
                </div>
                <div className='shop-con'>
                    <Table dataSource={userList} rowKey={record => record.id} pagination={pagination} onChange={this.changePage}>
                        <Column title="账号" dataIndex="username" key="username" />
                        <Column title="电话" dataIndex="phone" key="phone" />
                        <Column title="邮箱" dataIndex="email" key="email" />
                        <Column 
                            title="注册时间" 
                            dataIndex="createTime" 
                            key="createTime" 
                            render={(text) => (
                                <span>
                                    {filterTime(text)}
                                </span>
                            )}
                        />
                        <Column title="Action" dataIndex="password" key="password" />
                    </Table>
                </div>
            </div>
        );
    }
}

export default User;